$(function () {
    // 1. 获取当前页面的id信息; 
    // id信息在哪里 ， 地址栏上; 
    // - location ( BOM )
    // - url#数据 ， #后面的数据被我们称之为哈希值; 
    // 取出哈希值的方式  location.hash ; 
    // console.log( location.hash.split("=")[1] );
    // 2. 根据id信息向服务端发送请求; 
    // 3. 接受响应数据之后，根据数据渲染页面;

    // 当页面加载结束之后直接向服务端发起请求; 
    $(window).on("load", function () {
        let options = {
            url: "http://127.0.0.1:8888/goods/item/" + getId(),
            type: "GET",
            dataType: "json"
        }
        let res = $.ajax(options)
            .then(function(res){
                render(res)
                let m = new Magnifier();
                m.bindEvent();
            });
    })
    $(".add").click(handlerAddCart);

    function getId() {
        return location.hash.split("=")[1];
    }

    function render(res) {
        $(".container").html(`
    <div class="boxLeft">
            <!-- 小图  -->
            <div class="small-img">
                <!-- 焦点 -->
                <div class="focus"></div>
                <img src="${res.info.img_big_logo}" alt="">
            </div>
        </div>
        <!-- 大图 -->
        <div class="big-img">
            <img src="${res.info.img_big_logo}" alt="">
        </div>
        <div class="boxRig">
            <p class="title">${res.info.title}</p>
            <p class="price"> 
                <span>价格</span> <span class="sp1">￥</span><span class="red">${res.info.price}</span> <span>降价通知</span>
            </p>
            <p class="num">
                <span>数量</span> <span class="sp1">${res.info.goods_number}</span>
            </p>
        </div>`)
        $("#goods_introduce").html(res.info.goods_introduce);
    }

    function Magnifier() {
        // 选择程序需要的数据(元素)
        this.small_img_ele = $(".small-img");
        this.big_img = $(".big-img img")
        this.big_img_ele = $(".big-img");
        this.focus_ele = $(".focus");
        // 计算container里面的位置信息; 
        this.container_ele = $(".container");
        this.container_offset = this.container_ele.offset()

        // 获取到焦点框的宽高; 
        // - 小任务 : 通过dom操作获取focus宽高; 
        // - 记得翻阅一下之前将 offsetWidth 和 offsetHeight 属性的注意事项， 就知道为什么取出的值为0了; 
        this.focus_size = {
            width: this.focus_ele.width(),
            height: this.focus_ele.height()
        }
    }
    Magnifier.prototype.bindEvent = function () {
        // 在面向对象程序之中我们不会吧原型方法直接作为事件处理函数; 
        // - 因为这样写的话，原型方法this指向不可控; 
        var mag = this;
        this.small_img_ele.mouseover(function () {
            // 调用显示隐藏功能; 
            mag.toggle("show");
        })
        this.small_img_ele.mouseout(function () {
            // 调用显示隐藏功能; 
            mag.toggle("hide");
        })
        this.small_img_ele.mousemove(function (e = event) {
            // 给程序当前鼠标的位置; 
            mag.focusMove(e.clientX, e.clientY);
            mag.bigImgMove();
        });
    }
    Magnifier.prototype.toggle = function (type) {
        switch (type) {
            case "show":
                this.big_img_ele.show();
                this.focus_ele.show();
                break;
            case "hide":
                this.big_img_ele.hide();
                this.focus_ele.hide()
                break;
        }
    }

    Magnifier.prototype.focusMove = function (x, y) {
        var _left = x - this.container_offset.left - this.focus_size.width / 2;
        // top 是关键字 ，不能直接用做变量名
        var _top = y - this.focus_size.height / 2
        // 边界检测 : 
        // 数值不能小于最小值, 数值也不能大于最大值; 
        // - 判断条件 ， 变量不能小于最小值，如果小于最小值我们就让他变为最小值; 
        // - 变量也不能大于最大值，如果大于最大值，那么我们就让他变为最小值; 
        if (_left < 0) {
            _left = 0;
        }
        if (_top < 0) {
            _top = 0;
        }
        if (_left > 150) {
            _left = 150;
        }
        if (_top > 150) {
            _top = 150;
        }

        this.focus_ele.css({
            left: _left,
            top: _top
        })

        this.prop_left = _left / 150;
        this.prop_top = _top / 150;
    }
    // 跨函数获取数据; 
    Magnifier.prototype.bigImgMove = function () {
        this.big_img.css({
            left: -this.prop_left * 250,
            top: -this.prop_top * 250
        })
    }


    // 增加购物车功能 ; 
    function handlerAddCart() {
        // 1. 获取用户 id ; 
        var user_id = getCookie("userid");
        // 2. 获取商品 id ; 
        var goods_id = getId();

        var token = getCookie("token");

        // 使用ajax工具发起请求 : 

        // 注意 : 我们发送加入购物车请求的时候，把数据放在params 里面不放在body里面
        var options = {
            url: `http://127.0.0.1:8888/cart/add?id=${user_id}&goodsId=${goods_id}`,
            type: "post",
            data: {
                id: user_id,
                goodsId: goods_id
            },
            headers: {
                authorization: token
            }
        }

        $.ajax(options)
            .done(function (data) {
                // console.log( data );
                handlerAjax(data);
            });
    }

    function handlerAjax(data) {
        switch (data.code) {
            case 1:
                alert(data.message);
                break;
            case 401:
                alert("抱歉您还没有登录，请登录后再去加入购物车");
                location.href = "./login.html#goods";
                break;
        }
    }
})